//方案名称
<template>
  <div>
    <div class="add-form">
      <a-form-model
        ref="shemeForm"
        :model="shemeFormData"
        :rules="shemeFormRule"
        class="sheme-form"
      >
        <a-form-model-item label="方案名称" prop="schemeName">
          <a-input
          :maxLength="128"
            :disabled="look == 'look'"
            v-model="shemeFormData.schemeName"
          />
        </a-form-model-item>
        <a-form-model-item label="垫付手续费百分比" prop="advanceRatio">
          <a-input-number
            placeholder="垫付手续费百分比"
            style="width: 100%"
            :min="0"
            :disabled="look == 'look'"
            :max="100"
            v-model="shemeFormData.advanceRatio"
            :formatter="(value) => `${value}%`"
            :parser="(value) => value.replace('%', '')"
          />
        </a-form-model-item>
        <a-form-model-item label="手续费范围" style="height: 40px">
          <a-form-model-item prop="advanceLeft">
            <a-input-number
              placeholder="手续费范围"
              style="width: 100%"
              :min="0"
              :disabled="look == 'look'"
              v-model="shemeFormData.advanceLeft"
              :precision="2"
            />
          </a-form-model-item>
          <span style="margin: 0 10px">~</span>
          <a-form-model-item prop="advanceLeft">
            <a-input-number
              placeholder="手续费范围"
              style="width: 100%"
              :disabled="look == 'look'"
              :min="shemeFormData.advanceLeft * 1"
              v-model="shemeFormData.advanceRight"
              :precision="2"
          /></a-form-model-item>
        </a-form-model-item>
        <a-form-model-item label="是否启用" prop="" v-if="modalFlag != 'add'">
          <div>
            <a-switch
              :checked="shemeFormData.isDisable == 0"
              @change="onChangeIsDisable"
              :disabled="look == 'look'"
            />
          </div>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remarks">
          <a-input
          
            v-model="shemeFormData.remarks"
            :maxLength="20"
            :disabled="look == 'look'"
          />
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="footer">
      <a-button @click="cancel" style="margin-right: 20px">取消</a-button>
      <a-button v-if="look != 'look'" type="primary" @click="nextOk">{{
        modalFlag == "add" ? "确定" : "下一步"
      }}</a-button>
    </div>
  </div>
</template>

<script>
import {
  cost_addSheme,
  cost_searchOneSheme,
  cost_editSheme,
} from "@/apis/system/setManage/setRules";
export default {
  props: ["activeKey", "modalFlag", "parentData", "look"],
  data() {
    return {
      //表单验证
      shemeFormRule: {},
      //表单数据
      shemeFormData: {
        schemeName: null,
        advanceRatio: null,
        advanceLeft: null,
        advanceRight: null,
        isDisable: 1,
        remarks: null,
      },
    };
  },
  watch: {
    activeKey: {
      handler(newData) {
        if (newData != 1) {
          this.$bus.$emit("broData", this.shemeFormData);
        }
      },
      deep: true,
    },
  },
  mounted() {
    if (this.modalFlag == "add") {
      this.shemeFormData = {
        schemeName: null,
        advanceRatio: null,
        advanceLeft: null,
        advanceRight: null,
        isDisable: 1,
        remarks: null,
      };
    } else if (this.modalFlag == "edit") {
      setTimeout(async () => {
        let res = await cost_searchOneSheme(
          this.parentData.sysChargingSchemeId
        );
        if (res.code == "200") {
          this.shemeFormData = res.responseBody;
          setTimeout(() => {
            this.$bus.$emit("broData", this.shemeFormData);
          }, 50);
        }
      }, 50);
    }
  },
  methods: {
    //是否启用
    onChangeIsDisable(e) {
      if (e) {
        this.shemeFormData.isDisable = 0;
      } else {
        this.shemeFormData.isDisable = 1;
      }
    },
    nextOk() {
      this.loading = true;
      if (this.modalFlag == "add") {
        this.$refs.shemeForm.validate(async (valid) => {
          if (valid) {
            let res = await cost_addSheme(this.shemeFormData);
            if (res.code == "10000") {
              this.loading = false;
              this.shemeFormData = res.responseBody;
              await this.$bus.$emit("broData", res.responseBody);
              await this.$emit("changeActiveKey", 1);
            }
          } else {
            this.loading = false;
            return false;
          }
        });
      } else if (this.modalFlag == "edit") {
        this.$refs.shemeForm.validate(async (valid) => {
          if (valid) {
            let res = await cost_editSheme(
              this.shemeFormData.sysChargingSchemeId,
              this.shemeFormData
            );
            if (res.code == "10000") {
              this.loading = false;
              this.$emit("changeActiveKey", 1);
            }
          } else {
            this.loading = false;
            return false;
          }
        });
      }
    },
    cancel() {
      this.$emit("cancel", false);
    },
  },
};
</script>

<style lang="less" scoped>
.add-form {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
/deep/.sheme-form {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10%;
  align-items: center;
  width: 50%;
  .ant-form-item {
    display: flex;
    width: 100%;
    .ant-form-item-label {
      width: 125px !important;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      .ant-form-item-children {
        display: flex;
      }
    }
  }
}
.footer {
  margin-top: 20px;
  border-top: 1px solid #e8e8e8;
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
